<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card>
          <span>总计扣除糖果数量</span>
          <span style="padding-left: 20px;font-size: 20px;color: red;">{{sweet}}</span>
        </el-card>
      </el-col>
    </el-row>

    <el-table :data="tableData" stripe style="width: 100%;margin-top:15px" border>
      <el-table-column prop="sweetDeduction" label=" 扣除糖果数量" align="center"></el-table-column>
      <el-table-column prop="warningNum" label="警告次数" align="center"></el-table-column>
      <el-table-column prop="msg" label="消息" align="center"></el-table-column>
      <el-table-column prop="createDate" label="数据创建时间" align="center"></el-table-column>
    </el-table>

    <div class="page">
      <el-pagination :page-size="form.size" :current-page.sync="form.page" layout="prev, pager, next,total,jumper"
        :total="total" background @current-change="currentChange">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          page: 1, //页数
          size: 10, //条数
        },
        tableData: [],
        total: 0,
        sweet: 0,
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      //获取保证金列表数据
      getData() {
        this.$http.get(this.$api.getBondDeductionRecord, this.form).then(res => {
          if (res.code == 0) {
            this.tableData = res.data.recordLists;
            this.sweet = res.data.sweet == null ? 0 : res.data.sweet;
            this.total = res.extraInfo;
          } else {
            this.$message({
              type: 'success',
              message: res.msg
            })
          }
        })
      },
      //搜索
      search() {
        this.form.page = 1;
        this.getData();
      },
      //分页
      currentChange(val) {
        this.form.page = val;
        this.getData();
      },
    }
  }
</script>

<style scoped>
  .container {
    padding: 15px;
  }

  .page {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
